<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>镀锌炉温动态控制模型</h1>
      </div>
    </div>
    <div class="home-main">
      <el-row class="top h-90%">
        <el-col class="top-left" :span="7.2">
          <div class="msg-title">重要信息提示</div>
          <div class="information">
            <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="3000" indicator-position="none">
              <span style="color: transparent !important">{{ warningInfo[0].value }}</span>
              <el-carousel-item v-for="item in warningInfo" :key="item" style="color: white">{{ item.value }}</el-carousel-item>
            </el-carousel>
          </div>
          <div class="svg">
            <div class="realTimeTemp">
              实时温度（℃）：
              <el-row class="realTimeTemp_row">
                <div>
                  <span>P4:{{ p4Temp }}</span>
                </div>
                <div>
                  <span>P5:{{ p5Temp }}</span>
                </div>
                <div>
                  <span>P6:{{ p6Temp }}</span>
                </div>
              </el-row>
            </div>
            <svg-load name="combinedCAGalvTempModels"></svg-load>
            <div style="color: aliceblue; margin-left: 10vw; margin-top: -4vh">
              <span>焊缝距入炉距离：{{ distance }}</span>
            </div>
          </div>
        </el-col>
        <el-col class="top-middle" :span="12">
          <new-coil-card title="设定信息" class="common_table">
            <el-col>
              <el-row>
                <el-table :data="warningTableData" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }">
                  <el-table-column prop="chinese" label width="180px" />
                  <el-table-column prop="furnaceTemperature12" label="炉温1&2">
                    <template #default="scope">
                      <span v-if="scope.$index === 0">
                        {{ scope.row.furnaceTemperature12 }}
                        <!-- <img :src="imagePath(scope.$index)" /> -->
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="furnaceTemperature34" label="炉温3&4">
                    <template #default="scope">
                      <span v-if="scope.$index === 0">
                        {{ scope.row.furnaceTemperature34 }}
                        <!-- <img :src="imagePath(scope.$index)" /> -->
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="furnaceTemperature56" label="炉温5&6">
                    <template #default="scope">
                      <span v-if="scope.$index === 0">
                        {{ scope.row.furnaceTemperature56 }}
                        <!-- <img :src="imagePath(scope.$index)" /> -->
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="furnaceTemperature7" label="炉温7">
                    <template #default="scope">
                      <span v-if="scope.$index === 0">
                        {{ scope.row.furnaceTemperature7 }}
                        <!-- <img :src="imagePath(scope.$index)" /> -->
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="slowCool" label="缓冷">
                    <template #default="scope">
                      <span v-if="scope.$index === 0">
                        {{ scope.row.slowCool }}
                        <!-- <img :src="imagePath(scope.$index)" /> -->
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="steelType" label="钢种">
                    <template #default="scope">
                      <span v-if="scope.$index === 0">
                        {{ scope.row.steelType }}
                        <!-- <img :src="imagePath(scope.$index)" /> -->
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
              <el-row>
                <el-table :data="dewPoint" class="common_table" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }">
                  <el-table-column prop="chinese"></el-table-column>
                  <el-table-column prop="Phtg" label="Phtg"></el-table-column>
                  <el-table-column prop="Htg1" label="Htg 1"></el-table-column>
                  <el-table-column prop="Htg2" label="Htg 2"></el-table-column>
                  <el-table-column prop="Soak" label="Soak"></el-table-column>
                  <el-table-column prop="SCZ1" label="SC Z1"></el-table-column>
                  <el-table-column prop="SCZ2" label="SC Z2"></el-table-column>
                  <el-table-column prop="RCZ1" label="RC Z1"></el-table-column>
                  <el-table-column prop="RCZ2" label="RC Z2"></el-table-column>
                  <el-table-column prop="RCZ3" label="RC Z3"></el-table-column>
                  <el-table-column prop="Equal" label="Equal"></el-table-column>
                </el-table>
              </el-row>
            </el-col>
          </new-coil-card>
        </el-col>
        <el-col class="top-right" :span="4.8">
          <new-coil-card title="各炉段分区" class="common_table">
            <el-table
              :data="furnaceSectionTableData"
              :span-method="objectSpanMethod"
              style="width: 100%"
              :header-cell-style="{ background: '#2f59af', color: '#fff' }"
              :show-header="false"
            >
              <el-table-column prop="heat" label="heat" />
              <el-table-column prop="key" label="功能" />
              <el-table-column prop="value" label="值">
                <template #default="scope">
                  <span v-if="scope.$index === 0 || scope.$index === 2 || scope.$index === 4 || scope.$index === 6">
                    <img :src="imagePath(scope.row.value)" />
                  </span>
                  <span v-else>{{ scope.row.value + '%' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
      <el-row class="middle">
        <el-col :span="19.8" class="middle-left">
          <el-col :span="6.6" class="annealing_graph_1-1">
            <new-coil-card :title="annealGraphTitle">
              <template #header-right>
                <el-select
                  v-model="annealGraphOption"
                  placeholder="请选择"
                  @change="annealHandleOptionChange(annealGraphOption.value)"
                  label="炉区"
                  class="real-time_tem_select"
                >
                  <el-option v-for="item in annealGraphOptions" :key="item.value" :label="item.label" :value="item" />
                </el-select>
              </template>
              <graph-anneal
                :graph-data-upper="upperGraph"
                :graph-data-anneal="dataY"
                :graph-data-next="dataNext"
                :graph-data-lower="lowerGraph"
                :xdata="dataTimeX"
                :change="annealGraphOption.value == 0 ? p4Change : annealGraphOption.value == 1 ? p5Change : p6Change"
              />
            </new-coil-card>
          </el-col>
          <!-- <el-col :span="6.6" class="annealing_graph_1-2">
              <new-coil-card title="P5与退火曲线实时对比">
                <graph-anneal :graph-data-upper="upperGraph_P5" :graph-data-anneal="dataY_P5" :graph-data-lower="lowerGraph_P5" :xdata="dataTimeX" />
              </new-coil-card>
            </el-col>
            <el-col :span="6.6" class="annealing_graph_1-3">
              <new-coil-card title="P6与退火曲线实时对比">
                <graph-anneal :graph-data-upper="upperGraph_P6" :graph-data-anneal="dataY_P6" :graph-data-lower="lowerGraph_P6" :xdata="dataTimeX" />
              </new-coil-card>
            </el-col> -->
        </el-col>
        <el-col :span="4.2" class="middle-right">
          <new-coil-card title="基本信息" class="common_table base-info">
            <el-table :data="baseInfoTableData" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }">
              <el-table-column prop="基本信息" label="基本信息" />
              <el-table-column prop="currentCoil" label="当前卷">
                <template #default="scope">
                  <span v-if="scope.$index === 4">
                    <img :src="imagePath(scope.row.currentCoil)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="nextCoil" label="下一卷">
                <template #default="scope">
                  <span v-if="scope.$index === 4">
                    <img :src="imagePath(scope.row.nextCoil)" />
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
      <el-row class="foot-lineChart">
        <el-col :span="19.8" class="foot-lineChart-left">
          <new-coil-card title="实时温度曲线">
            <template #header-right>
              <el-select v-model="temGraphOption" placeholder="请选择" @change="handleOptionChange()" label="炉区" class="real-time_tem_select">
                <el-option v-for="item in temGraphOptions" :key="item.value" :label="item.label" :value="item" />
              </el-select>
            </template>
            <div class="real-time_tem_graph">
              <graph-card :graph-data-a-i="graphDataAI" :graph-data-m-m="graphDataMM" :graph-data-p-l-c="graphDataPLC" :xdata="realTempTimeX" />
            </div>
          </new-coil-card>
        </el-col>
        <!-- <el-col :span="4.2" class="foot-lineChart-right">
          <new-coil-card title="钢卷信息" class="common_table">
            <el-table :data="footTable" style="width: 100%; height: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }">
              <el-table-column prop="extId" label="卷号" :width="columnWidth(21)" />
              <el-table-column prop="steelGrade" label="钢种" :width="columnWidth(15)" />
              <el-table-column prop="extWidth" label="宽度" :width="columnWidth(11)">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.extWidth) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="extThich" label="厚度" :width="columnWidth(11)">
                <template #default="scope">
                  <span>{{ Math.round(scope.row.extThich) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="p4Hit" label="P4命中率" :width="columnWidth(14)">
                <template #default="scope">
                  <span>{{ (scope.row.p4Hit * 100).toFixed(2) + '%' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="p5Hit" label="P5命中率" :width="columnWidth(14)">
                <template #default="scope">
                  <span>{{ (scope.row.p5Hit * 100).toFixed(2) + '%' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="p6Hit" label="P6命中率" :width="columnWidth(14)">
                <template #default="scope">
                  <span>{{ (scope.row.p6Hit * 100).toFixed(2) + '%' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </new-coil-card>
        </el-col> -->
      </el-row>
      <el-row class="foot">
        <el-col :span="24">
          <new-coil-card title="AI模型投用状态" class="common_table">
            <el-table :data="aiModeTableData" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }">
              <el-table-column prop="furnaceTemperature12" label="炉温1&2" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature12)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature34" label="炉温3&4" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature34)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature56" label="炉温5&6" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature56)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature7" label="炉温7" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature7)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="slowCool" label="缓冷" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.slowCool)" />
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
  // import { defineComponent, ref } from 'vue';
  import NewCoilCard from '/@/components/NewCoilCard/NewCoilCard.vue';
  import CpcWidth from '/@/components/CpcWidth/CpcWidth.vue';
  import { ref, reactive, onMounted, onUnmounted, defineComponent, watch, onBeforeMount } from 'vue';
  import * as echarts from 'echarts/core';
  import { BarChart, LineChart } from 'echarts/charts';
  import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent } from 'echarts/components';
  import { CanvasRenderer } from 'echarts/renderers';
  import MEcharts from '/@/components/MEcharts/MEcharts.vue';
  import GraphCard from '/@/components/CpcWidth/GraphCard.vue';
  import GraphAnneal from '/@/components/GraphDraw/GraphAnneal.vue';
  import dayjs from 'dayjs';
  import { furnaceTempDynamicCtrlApi } from '/@/api/furnaceTempDynamicCtrl/index';
  import { ElMessage } from 'element-plus';
  import { refreshSVG, initialSVG, refreshGraphical } from '/@/common/refreshSVG';
  import { rollingSimulationApi } from '/@/api/RollingSimulation/index';
  import { useUserStore } from '/@/store/modules/system/user';

  // Register ECharts components
  echarts.use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, LineChart, CanvasRenderer, MarkLineComponent]);
  // import Image from '/@/assets/images';
  // import dayjs from 'dayjs';

  export default defineComponent({
    components: {
      NewCoilCard,
      CpcWidth,
      MEcharts,
      GraphCard,
      GraphAnneal,
      // SvgLoad,
    },
    setup() {
      const menuData = ref([
        { menuName: 'CAL1870-combinedCAGalvTempModel', menuTitle: '镀锌炉温动态控制模型主页面', menuId: '1' },
        { menuName: 'CAL1870-calculateParameterInput', menuTitle: '离线计算参数输入画面' },
        { menuName: 'CAL1870-calculateParameterList', menuTitle: '离线计算参数列表画面' },
        { menuName: 'CAL1870-analysisOfAbnormalities', menuTitle: '带钢温度异常分析' },
      ]);
      onBeforeMount(() => {
        useUserStore().setTagNav(menuData.value);
      });
      const warningTableData = ref([
        {
          chinese: '工艺过度异常提示',
          furnaceTemperature12: '-',
          furnaceTemperature34: '-',
          furnaceTemperature56: '-',
          furnaceTemperature7: '-',
          slowCool: '-',
          steelType: '-',
        },
        {
          chinese: '当前卷AI模型设定值',
          furnaceTemperature12: '',
          furnaceTemperature34: '',
          furnaceTemperature56: '',
          furnaceTemperature7: '',
          slowCool: '',
          steelType: '',
        },
        {
          chinese: '下一卷AI模型设定值',
          furnaceTemperature12: '',
          furnaceTemperature34: '',
          furnaceTemperature56: '',
          furnaceTemperature7: '',
          slowCool: '',
          steelType: '',
        },
        {
          chinese: '实际值',
          furnaceTemperature12: '',
          furnaceTemperature34: '',
          furnaceTemperature56: '',
          furnaceTemperature7: '',
          slowCool: '',
          steelType: '',
        },
      ]);
      const furnaceSectionTableData = ref([
        { heat: 'heat1&2', key: '供热能力', value: '' },
        { heat: 'heat1&2', key: '辐射管使用率', value: '' },
        { heat: 'heat3&4', key: '供热能力', value: '' },
        { heat: 'heat3&4', key: '辐射管使用率', value: '' },
        { heat: 'heat5&6', key: '供热能力', value: '' },
        { heat: 'heat1&2', key: '辐射管使用率', value: '' },
        { heat: 'heat7', key: '供热能力', value: '' },
        { heat: 'heat7', key: '辐射管使用率', value: '' },
      ]);
      const baseInfoTableData = ref([
        { 基本信息: '钢卷号', currentCoil: '', nextCoil: '' },
        { 基本信息: '钢种', currentCoil: '', nextCoil: '' },
        { 基本信息: '宽度', currentCoil: '', nextCoil: '' },
        { 基本信息: '厚度', currentCoil: '', nextCoil: '' },
        { 基本信息: '反射率异常', currentCoil: '', nextCoil: '' },
      ]);
      let tr: any = null;
      let por: any = null;
      let ti: any = null;
      const exportLooper = ref<number>(0);
      const aiModeTableData = ref([
        {
          furnaceTemperature12: 0,
          furnaceTemperature34: 0,
          furnaceTemperature56: 0,
          furnaceTemperature7: 0,
          slowCool: 0,
        },
      ]);
      const footTable = ref([
        {
          extId: '',
          steelGrade: '',
          extWidth: '',
          extThich: '',
          p4Hit: '',
          p5Hit: '',
          p6Hit: '',
        },
      ]);

      type Options = {
        value: number;
        label: string;
        // key: string;
      };

      // 下拉框选项
      const temGraphOptions = ref([
        { value: 0, label: '炉温1&2' },
        { value: 1, label: '炉温3&4' },
        { value: 2, label: '炉温5&6' },
        { value: 3, label: '炉温7' },
      ]);

      // 下拉框选项
      const annealGraphOptions = ref([
        { value: 0, label: 'P4' },
        { value: 1, label: 'P5' },
        { value: 2, label: 'P6' },
      ]);
      const temGraphOption = ref<Options>({ value: 0, label: '炉温1&2' });
      const annealGraphOption = ref<Options>({ value: 0, label: 'P4' });
      const annealGraphTitle = ref('P4与退火曲线实时对比');
      const p4Temp = ref();
      const p5Temp = ref();
      const p6Temp = ref();
      const distance = ref('0');

      // --- 生命周期钩子 ---
      let interval: any = null;
      let intervalSteelInfo: any = null;

      const graphDataAI = ref<number[]>([]);
      const graphDataMM = ref<number[]>([]);
      const graphDataPLC = ref<number[]>([]);

      const dataY = ref<any[]>([]);
      const dataNext = ref<any[]>([]);
      // const change = ref(false);
      const p4Change = ref(0);
      const p5Change = ref(0);
      const p6Change = ref(0);
      const currentId = ref('');
      // const dataY_P5 = ref<number[]>([]);
      // const dataY_P6 = ref<number[]>([]);
      const dataTimeX = ref<string[]>([]);
      const realTempTimeX = ref<string[]>([]);
      const lowerGraph = ref<number[]>([]);
      const upperGraph = ref<number[]>([]);
      // const lowerGraph_P5 = ref<number[]>([]);
      // const upperGraph_P5 = ref<number[]>([]);
      // const lowerGraph_P6 = ref<number[]>([]);
      // const upperGraph_P6 = ref<number[]>([]);
      const technologicalName = 'combinedCAGalvTempModels';
      const inletLooper = ref<number>(0);
      const middleLooper = ref<number>(0);

      const objectSpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return { rowspan: 2, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
      };
      const graphPropsName = reactive({
        p4: 'p4',
        p5: 'p5',
        p6: 'p6',
        p8: 'p8',
        p9: 'p9',
        p10: 'p10',
      });

      const warningInfo = [
        { value: '请注意，连退炉当前温度低于设定值，请及时调整。' },
        { value: '镀锌炉的运行效率出现下降，可能需要检查设备。' },
        { value: '系统检测到连退炉的电压波动较大，请联系技术人员。' },
        { value: '镀锌炉的温度控制系统可能出现故障，建议尽快处理。' },
        { value: '连退炉的冷却水流量异常，请确认管道是否畅通。' },
        { value: '当前镀锌炉的气体流量超出正常范围，请进行调整。' },
        { value: '系统提示，连退炉的温度传感器可能需要校准。' },
        { value: '请注意，镀锌炉的运行参数已超出安全范围，请立即处理。' },
        { value: '连退炉的加热元件可能出现损坏，建议进行维修。' },
        { value: '当前连退炉的温度变化速率较快，可能影响产品质量。' },
      ];

      const dewPoint = ref([
        {
          chinese: '露点',
          Phtg: '-35',
          Htg1: '-30',
          Htg2: '-34',
          Soak: '-35',
          SCZ1: '-35',
          SCZ2: '-34',
          RCZ1: '-32',
          RCZ2: '-34',
          RCZ3: '-34',
          Equal: '-32',
        },
      ]);

      const columnWidth = (percent: number) => {
        const tableWidth = 500; // 根据实际父容器宽度设置
        return (tableWidth * percent) / 100 + 'px';
      };

      const columnHeight = (percent: number) => {
        const tableHeight = 500; // 根据实际父容器高度设置
        return (tableHeight * percent) / 100 + 'px';
      };

      const imagePath = (value: number) => {
        let name = 'red.png';
        if (value == 0) {
          name = 'green.png';
        }
        return `/src/assets/images/${name}`;
      };

      const fetchData = () => {
        // getSteelInfo();
        interval = setInterval(() => {
          getZoneTrk();
          getWarningTableData();
          getFurnaceSectionTableData();
          getBaseInfoTableData();
          getAnnealingGraphData();
          getRealTimeTemGraphData();
          getAIModeTableData();
          dataTimeX.value.push(dayjs().format('HH:mm:ss'));
          realTempTimeX.value.push(dayjs().format('HH:mm:ss'));
        }, 2000);
        // intervalSteelInfo = setInterval(() => {
        //   getSteelInfo();
        // }, 10000);
      };

      const handleOptionChange = () => {
        graphDataAI.value = [];
        graphDataMM.value = [];
        graphDataPLC.value = [];
        realTempTimeX.value = [];
      };

      const findAnnealingGraphData = async () => {
        const param = {
          action: 'get_tags',
          operator: 'abc ',
          terminal: 'FM_01',
          body: [
            {
              tagName: 'cgl_p4_temp_set',
              timestamp: 0,
            },
            {
              tagName: 'cgl_p5_temp_set',
              timestamp: 0,
            },
            {
              tagName: 'cgl_p6_temp_set',
              timestamp: 0,
            },
            {
              tagName: 'cgl_p4_temp_act',
              timestamp: 0,
            },
            {
              tagName: 'cgl_p5_temp_act',
              timestamp: 0,
            },
            {
              tagName: 'cgl_p6_temp_act',
              timestamp: 0,
            },
          ],
        };
        try {
          const res = await furnaceTempDynamicCtrlApi.getTableData(param);
          p4Temp.value = res.data.results[3].value.toFixed(2);
          p5Temp.value = res.data.results[4].value.toFixed(2);
          p6Temp.value = res.data.results[5].value.toFixed(2);
          annealGraphTitle.value = `P${annealGraphOption.value.value + 4}与退火曲线实时对比`;
          upperGraph.value.push(res.data.results[annealGraphOption.value.value].value + 10).toFixed(2);
          lowerGraph.value.push(res.data.results[annealGraphOption.value.value].value - 10).toFixed(2);
          if (annealGraphOption.value.value == 0) {
            if (p4Change.value % 2 == 1) {
              dataY.value.push(null);
              dataNext.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
            } else {
              dataY.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
              dataNext.value.push(null);
            }
          } else if (annealGraphOption.value.value == 1) {
            if (p5Change.value % 2 == 1) {
              dataY.value.push(null);
              dataNext.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
            } else {
              dataY.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
              dataNext.value.push(null);
            }
          } else if (annealGraphOption.value.value == 2) {
            if (p6Change.value % 2 == 1) {
              dataY.value.push(null);
              dataNext.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
            } else {
              dataY.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
              dataNext.value.push(null);
            }
          }
          // else {
          //   dataY.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
          //   dataNext.value.push(null);
          // }
          // if (change.value) {
          //   dataY.value.push(null);
          //   dataNext.value.push(res.data.results[annealGraphOption.value.value].value.toFixed(2));
          // } else {
          //   dataY.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
          //   dataNext.value.push(null);
          // }
          // if (dataY.value.length < 10) {
          //   dataY.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
          //   dataNext.value.push(null);
          // } else if ((dataY.value.length = 10)) {
          //   dataY.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
          //   dataNext.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
          // } else {
          //   dataY.value.push(null);
          //   dataNext.value.push(res.data.results[annealGraphOption.value.value + 3].value.toFixed(2));
          // }
        } catch (error) {
          ElMessage.error('获取数据失败');
        }
      };

      // 退火曲线切换
      const annealHandleOptionChange = async (val: number) => {
        upperGraph.value = [];
        lowerGraph.value = [];
        dataY.value = [];
        dataNext.value = [];
        dataTimeX.value = [];
        p4Change.value = 0;
        p5Change.value = 0;
        p6Change.value = 0;
        currentId.value = '';
        findAnnealingGraphData();
        // let tagNameSet = 'cgl_p4_temp_set';
        // let tagNameAct = 'cgl_p4_temp_act';
        // if (val == 1) {
        //   tagNameSet = 'cgl_p5_temp_set';
        //   tagNameAct = 'cgl_p5_temp_act';
        // } else if (val == 2) {
        //   tagNameSet = 'cgl_p6_temp_set';
        //   tagNameAct = 'cgl_p6_temp_act';
        // }
        // const param = {
        //   action: 'get_tags',
        //   operator: 'abc ',
        //   terminal: 'FM_01',
        //   body: [
        //     {
        //       tagName: tagNameSet,
        //       timestamp: 0,
        //     },
        //     {
        //       tagName: tagNameAct,
        //       timestamp: 0,
        //     },
        //   ],
        // };
        // const res = await furnaceTempDynamicCtrlApi.getTableData(param);
        // upperGraph.value.push(res.data.results[0].value + 10).toFixed(2);
        // lowerGraph.value.push(res.data.results[0].value - 10).toFixed(2);
        // dataY.value.push(res.data.results[0].value.toFixed(2));
        // res.data.results.forEach((element: any) => {
        //   if (element.tagName == 'cgl_p4_temp_set') {
        //     upperGraph_P4.value.push(element.value + 10).toFixed(2);
        //     lowerGraph_P4.value.push(element.value - 10).toFixed(2);
        //   }
        //   if (element.tagName == 'cgl_p4_temp_act') dataY_P4.value.push(element.value.toFixed(2));
        //   if (element.tagName == 'cgl_p5_temp_set') {
        //     upperGraph_P4.value.push(element.value + 10).toFixed(2);
        //     lowerGraph_P4.value.push(element.value - 10).toFixed(2);
        //   }
        //   if (element.tagName == 'cgl_p5_temp_act') dataY_P5.value.push(element.value.toFixed(2));
        //   if (element.tagName == 'cgl_p6_temp_set') {
        //     upperGraph_P4.value.push(element.value + 10).toFixed(2);
        //     lowerGraph_P4.value.push(element.value - 10).toFixed(2);
        //   }
        //   if (element.tagName == 'cgl_p6_temp_act') dataY_P6.value.push(element.value.toFixed(2));
        // });
      };

      // 钢卷跟踪
      async function getZoneTrk() {
        let param = {
          name: 'CGL1870_zonetrk',
        };
        rollingSimulationApi.rest(param).then((res) => {
          let zones = res.data.zoneno;
          if (currentId.value == '') {
            annealGraphOption.value.value == 0
              ? (currentId.value = zones[82].entId)
              : annealGraphOption.value.value == 1
              ? (currentId.value = zones[87].entId)
              : (currentId.value = zones[95].entId);
          }
          if (annealGraphOption.value.value == 0 && zones[82].entId != currentId.value) {
            currentId.value = zones[82].entId;
            p4Change.value += 1;
          } else if (annealGraphOption.value.value == 1 && zones[87].entId != currentId.value) {
            currentId.value = zones[87].entId;
            p5Change.value += 1;
          } else if (annealGraphOption.value.value == 2 && zones[95].entId != currentId.value) {
            currentId.value = zones[95].entId;
            p6Change.value += 1;
          }
          //weldMachineState(`${technologicalName}-welder`, res.data.weld);
          inletLooper.value = res.data['loop'][0];
          middleLooper.value = res.data['loop'][1];
          exportLooper.value = res.data['loop'][2];
          let trKey = `${technologicalName}-ZONE_tr${res.data.tr}`;
          let trpathKey = trKey + '_path';
          let porKey = `${technologicalName}-ZONE_por${res.data.por}`;
          let porpathKey = porKey + '_path';
          var arr = Object.keys(zones);
          /**开卷机和卷取机 */
          if (tr === null || tr !== res.data.tr) {
            tr = res.data.tr;
            refreshSVG(zones[arr.length - 1].ti % 10, trpathKey);
            refreshGraphical(zones[arr.length - 1].ti % 10, trKey);
            initialSVG(technologicalName, 'tr', res.data.tr);
          }
          if (por === null || por !== res.data.por) {
            por = res.data.por;
            if (res.data.por === 0) {
              initialSVG(technologicalName, 'por', '1');
              initialSVG(technologicalName, 'por', '2');
            }
          }
          if (ti === null || ti !== zones[0].ti) {
            ti = zones[0].ti;
            refreshSVG(zones[0].ti % 10, porpathKey);
            refreshGraphical(zones[0].ti % 10, porKey);
            initialSVG(technologicalName, 'por', res.data.por);
          }
          for (let i in zones) {
            let pathkey = `${technologicalName}-ZONE${i}`;
            refreshSVG(zones[i].ti % 10, pathkey);
          }
        });
      }

      // 警告信息
      async function getWarningTableData() {
        const param = {
          action: 'get_tags',
          operator: 'abc ',
          terminal: 'FM_01',
          body: [
            {
              tagName: 'FURT_12',
              timestamp: 0,
            },
            {
              tagName: 'FURT_34',
              timestamp: 0,
            },
            {
              tagName: 'FURT_56',
              timestamp: 0,
            },
            {
              tagName: 'FURT_7',
              timestamp: 0,
            },
            {
              tagName: 'SLOWCOOL',
              timestamp: 0,
            },
            {
              tagName: 'STEELTP',
              timestamp: 0,
            },
            {
              tagName: 'FURT_12NXT',
              timestamp: 0,
            },
            {
              tagName: 'FURT_34NXT',
              timestamp: 0,
            },
            {
              tagName: 'FURT_56NXT',
              timestamp: 0,
            },
            {
              tagName: 'FURT_7NXT',
              timestamp: 0,
            },
            {
              tagName: 'SLOWCOOLNXT',
              timestamp: 0,
            },
            {
              tagName: 'STEELTPNXT',
              timestamp: 0,
            },
            {
              tagName: 'cgl_heat_hs12_temp',
              timestamp: 0,
            },
            {
              tagName: 'cgl_heat_hs34_temp',
              timestamp: 0,
            },
            {
              tagName: 'cgl_heat_hs56_temp',
              timestamp: 0,
            },
            {
              tagName: 'cgl_hs7_temp_act',
              timestamp: 0,
            },
            {
              tagName: 'cgl_p6_temp_act',
              timestamp: 0,
            },
          ],
        };
        const res = await furnaceTempDynamicCtrlApi.getTableData(param);
        res.data.results.forEach((element: any) => {
          if (element.tagName == 'FURT_12') warningTableData.value[1].furnaceTemperature12 = element.value.toFixed(2);
          if (element.tagName == 'FURT_34') warningTableData.value[1].furnaceTemperature34 = element.value.toFixed(2);
          if (element.tagName == 'FURT_56') warningTableData.value[1].furnaceTemperature56 = element.value.toFixed(2);
          if (element.tagName == 'FURT_7') warningTableData.value[1].furnaceTemperature7 = element.value.toFixed(2);
          if (element.tagName == 'SLOWCOOL') warningTableData.value[1].slowCool = element.value.toFixed(2);
          if (element.tagName == 'STEELTP') {
            warningTableData.value[1].steelType = element.value;
            warningTableData.value[3].steelType = element.value;
          }
          if (element.tagName == 'FURT_12NXT') warningTableData.value[2].furnaceTemperature12 = element.value.toFixed(2);
          if (element.tagName == 'FURT_34NXT') warningTableData.value[2].furnaceTemperature34 = element.value.toFixed(2);
          if (element.tagName == 'FURT_56NXT') warningTableData.value[2].furnaceTemperature56 = element.value.toFixed(2);
          if (element.tagName == 'FURT_7NXT') warningTableData.value[2].furnaceTemperature7 = element.value.toFixed(2);
          if (element.tagName == 'SLOWCOOLNXT') warningTableData.value[2].slowCool = element.value.toFixed(2);
          if (element.tagName == 'STEELTPNXT') warningTableData.value[2].steelType = element.value;
          if (element.tagName == 'cgl_heat_hs12_temp') warningTableData.value[3].furnaceTemperature12 = element.value.toFixed(2);
          if (element.tagName == 'cgl_heat_hs34_temp') warningTableData.value[3].furnaceTemperature34 = element.value.toFixed(2);
          if (element.tagName == 'cgl_heat_hs56_temp') warningTableData.value[3].furnaceTemperature56 = element.value.toFixed(2);
          if (element.tagName == 'cgl_hs7_temp_act') warningTableData.value[3].furnaceTemperature7 = element.value.toFixed(2);
          if (element.tagName == 'cgl_p6_temp_act') warningTableData.value[3].slowCool = element.value.toFixed(2);
        });
      }

      // 各炉段分区
      async function getFurnaceSectionTableData() {
        const param = {
          action: 'get_tags',
          operator: 'abc ',
          terminal: 'FM_01',
          body: [
            {
              tagName: 'gr12',
              timestamp: 0,
            },
            {
              tagName: 'gr34',
              timestamp: 0,
            },
            {
              tagName: 'gr56',
              timestamp: 0,
            },
            {
              tagName: 'gr7',
              timestamp: 0,
            },
            {
              tagName: 'sz12',
              timestamp: 0,
            },
            {
              tagName: 'sz34',
              timestamp: 0,
            },
            {
              tagName: 'sz56',
              timestamp: 0,
            },
            {
              tagName: 'sz7',
              timestamp: 0,
            },
          ],
        };
        const res = await furnaceTempDynamicCtrlApi.getTableData(param);
        res.data.results.forEach((element: any) => {
          if (element.tagName == 'gr12') furnaceSectionTableData.value[0].value = element.value;
          if (element.tagName == 'gr34') furnaceSectionTableData.value[2].value = element.value;
          if (element.tagName == 'gr56') furnaceSectionTableData.value[4].value = element.value;
          if (element.tagName == 'gr7') furnaceSectionTableData.value[6].value = element.value;
          if (element.tagName == 'sz12') furnaceSectionTableData.value[1].value = element.value.toFixed(2);
          if (element.tagName == 'sz34') furnaceSectionTableData.value[3].value = element.value.toFixed(2);
          if (element.tagName == 'sz56') furnaceSectionTableData.value[5].value = element.value.toFixed(2);
          if (element.tagName == 'sz7') furnaceSectionTableData.value[7].value = element.value.toFixed(2);
        });
      }

      // 基本信息
      async function getBaseInfoTableData() {
        const param = {
          action: 'get_tags',
          operator: 'abc ',
          terminal: 'FM_01',
          body: [
            {
              tagName: 'coilid',
              timestamp: 0,
            },
            {
              tagName: 'STEELTP',
              timestamp: 0,
            },
            {
              tagName: 'width',
              timestamp: 0,
            },
            {
              tagName: 'thick',
              timestamp: 0,
            },
            {
              tagName: 'fslv',
              timestamp: 0,
            },
            {
              tagName: 'coilidnxt',
              timestamp: 0,
            },
            {
              tagName: 'STEELTPNXT',
              timestamp: 0,
            },
            {
              tagName: 'widthnxt',
              timestamp: 0,
            },
            {
              tagName: 'thicknxt',
              timestamp: 0,
            },
            {
              tagName: 'fslvnxt',
              timestamp: 0,
            },
          ],
        };
        const res = await furnaceTempDynamicCtrlApi.getTableData(param);
        res.data.results.forEach((element: any) => {
          if (element.tagName == 'coilid') baseInfoTableData.value[0].currentCoil = element.value;
          if (element.tagName == 'coilidnxt') baseInfoTableData.value[0].nextCoil = element.value;
          if (element.tagName == 'STEELTP') baseInfoTableData.value[1].currentCoil = element.value;
          if (element.tagName == 'STEELTPNXT') baseInfoTableData.value[1].nextCoil = element.value;
          if (element.tagName == 'width') baseInfoTableData.value[2].currentCoil = element.value;
          if (element.tagName == 'widthnxt') baseInfoTableData.value[2].nextCoil = element.value;
          if (element.tagName == 'thick') baseInfoTableData.value[3].currentCoil = element.value;
          if (element.tagName == 'thicknxt') baseInfoTableData.value[3].nextCoil = element.value;
          if (element.tagName == 'fslv') baseInfoTableData.value[4].currentCoil = element.value;
          if (element.tagName == 'fslvnxt') baseInfoTableData.value[4].nextCoil = element.value;
        });
      }

      // 退火曲线
      async function getAnnealingGraphData() {
        findAnnealingGraphData();
        // const param = {
        //   action: 'get_tags',
        //   operator: 'abc ',
        //   terminal: 'FM_01',
        //   body: [
        //     {
        //       tagName: 'cgl_p4_temp_set',
        //       timestamp: 0,
        //     },
        //     {
        //       tagName: 'cgl_p4_temp_act',
        //       timestamp: 0,
        //     },
        //     {
        //       tagName: 'cgl_p5_temp_set',
        //       timestamp: 0,
        //     },
        //     {
        //       tagName: 'cgl_p5_temp_act',
        //       timestamp: 0,
        //     },
        //     {
        //       tagName: 'cgl_p6_temp_set',
        //       timestamp: 0,
        //     },
        //     {
        //       tagName: 'cgl_p6_temp_act',
        //       timestamp: 0,
        //     },
        //   ],
        // };
        // const res = await furnaceTempDynamicCtrlApi.getTableData(param);
        // res.data.results.forEach((element: any) => {
        //   if (element.tagName == 'cgl_p4_temp_set') {
        //     upperGraph_P4.value.push(element.value + 10).toFixed(2);
        //     lowerGraph_P4.value.push(element.value - 10).toFixed(2);
        //   }
        //   if (element.tagName == 'cgl_p4_temp_act') dataY_P4.value.push(element.value.toFixed(2));
        //   if (element.tagName == 'cgl_p5_temp_set') {
        //     upperGraph_P5.value.push(element.value + 10).toFixed(2);
        //     lowerGraph_P5.value.push(element.value - 10).toFixed(2);
        //   }
        //   if (element.tagName == 'cgl_p5_temp_act') dataY_P5.value.push(element.value.toFixed(2));
        //   if (element.tagName == 'cgl_p6_temp_set') {
        //     upperGraph_P6.value.push(element.value + 10).toFixed(2);
        //     lowerGraph_P6.value.push(element.value - 10).toFixed(2);
        //   }
        //   if (element.tagName == 'cgl_p6_temp_act') dataY_P6.value.push(element.value.toFixed(2));
        // });
      }

      // 实时温度曲线
      async function getRealTimeTemGraphData() {
        let tagNameMM = 'cgl_heat_12';
        let tagNameAI = 'FURT_12';
        let tagNameReal = 'cgl_heat_hs12_temp';
        if (temGraphOption.value.value == 1) {
          tagNameMM = 'cgl_heat_34';
          tagNameAI = 'FURT_34';
          tagNameReal = 'cgl_heat_hs34_temp';
        } else if (temGraphOption.value.value == 2) {
          tagNameMM = 'cgl_heat_56';
          tagNameAI = 'FURT_56';
          tagNameReal = 'cgl_heat_hs56_temp';
        } else if (temGraphOption.value.value == 3) {
          tagNameMM = 'cgl_heat_7';
          tagNameAI = 'FURT_7';
          tagNameReal = 'cgl_hs7_temp_act';
        }
        const param = {
          action: 'get_tags',
          operator: 'abc ',
          terminal: 'FM_01',
          body: [
            {
              tagName: tagNameMM,
              timestamp: 0,
            },
            {
              tagName: tagNameAI,
              timestamp: 0,
            },
            {
              tagName: tagNameReal,
              timestamp: 0,
            },
          ],
        };
        const res = await furnaceTempDynamicCtrlApi.getTableData(param);
        res.data.results.forEach((element: any) => {
          if (element.tagName == 'cgl_heat_12') graphDataMM.value.push(element.value.toFixed(2));
          if (element.tagName == 'FURT_12') graphDataAI.value.push(element.value.toFixed(2));
          if (element.tagName == 'cgl_heat_hs12_temp') graphDataPLC.value.push(element.value.toFixed(2));
          if (element.tagName == 'cgl_heat_34') graphDataMM.value.push(element.value.toFixed(2));
          if (element.tagName == 'FURT_34') graphDataAI.value.push(element.value.toFixed(2));
          if (element.tagName == 'cgl_heat_hs34_temp') graphDataPLC.value.push(element.value.toFixed(2));
          if (element.tagName == 'cgl_heat_56') graphDataMM.value.push(element.value.toFixed(2));
          if (element.tagName == 'FURT_56') graphDataAI.value.push(element.value.toFixed(2));
          if (element.tagName == 'cgl_heat_hs56_temp') graphDataPLC.value.push(element.value.toFixed(2));
          if (element.tagName == 'cgl_heat_7') graphDataMM.value.push(element.value.toFixed(2));
          if (element.tagName == 'FURT_7') graphDataAI.value.push(element.value.toFixed(2));
          if (element.tagName == 'cgl_hs7_temp_act') graphDataPLC.value.push(element.value.toFixed(2));
        });
      }

      // 钢卷信息
      // async function getSteelInfo() {
      //   try {
      //     const res = await furnaceTempDynamicCtrlApi.getSteelInfo();
      //     footTable.value = res.data.data;
      //   } catch (error) {
      //     ElMessage.error('钢卷信息数据获取失败');
      //   }
      // }

      async function getAIModeTableData() {
        const param = {
          action: 'get_tags',
          operator: 'abc ',
          terminal: 'FM_01',
          body: [
            {
              tagName: 'GAL_DATA.ControlModeHS12',
              timestamp: 0,
            },
            {
              tagName: 'GAL_DATA.ControlModeHS34',
              timestamp: 0,
            },
            {
              tagName: 'GAL_DATA.ControlModeHS56',
              timestamp: 0,
            },
            {
              tagName: 'GAL_DATA.ControlModeHS7',
              timestamp: 0,
            },
            {
              tagName: 'GAL_DATA.ControlModeSCS',
              timestamp: 0,
            },
          ],
        };
        const res = await furnaceTempDynamicCtrlApi.getTableData(param);
        res.data.results.forEach((element: any) => {
          if (element.tagName == 'GAL_DATA.ControlModeHS12') aiModeTableData.value[0].furnaceTemperature12 = element.value;
          if (element.tagName == 'GAL_DATA.ControlModeHS34') aiModeTableData.value[0].furnaceTemperature34 = element.value;
          if (element.tagName == 'GAL_DATA.ControlModeHS56') aiModeTableData.value[0].furnaceTemperature56 = element.value;
          if (element.tagName == 'GAL_DATA.ControlModeHS7') aiModeTableData.value[0].furnaceTemperature7 = element.value;
          if (element.tagName == 'GAL_DATA.ControlModeSCS') aiModeTableData.value[0].slowCool = element.value;
        });
      }

      watch(
        () => {
          return dataTimeX.value.length;
        },
        () => {
          if (dataTimeX.value.length > 300) {
            dataTimeX.value.shift();
            dataY.value.shift();
            dataNext.value.shift();
            // dataY_P5.value.shift();
            // dataY_P6.value.shift();
            lowerGraph.value.shift();
            upperGraph.value.shift();
            // lowerGraph_P5.value.shift();
            // upperGraph_P5.value.shift();
            // lowerGraph_P6.value.shift();
            // upperGraph_P6.value.shift();
          }
          if (realTempTimeX.value.length > 300) {
            realTempTimeX.value.shift();
            graphDataAI.value.shift();
            graphDataMM.value.shift();
            graphDataPLC.value.shift();
          }
        }
      );

      onMounted(() => {
        fetchData();
      });

      onUnmounted(() => {
        dataTimeX.value = [];
        realTempTimeX.value = [];
        graphDataAI.value = [];
        graphDataMM.value = [];
        graphDataPLC.value = [];
        dataY.value = [];
        dataNext.value = [];
        // dataY_P5.value = [];
        // dataY_P6.value = [];
        upperGraph.value = [];
        // upperGraph_P5.value = [];
        // upperGraph_P6.value = [];
        lowerGraph.value = [];
        // lowerGraph_P4.value = [];
        // lowerGraph_P4.value = [];
        // interval?.dispose();
        // intervalSteelInfo?.dispose();
        clearInterval(intervalSteelInfo);
        clearInterval(interval);
      });

      return {
        warningTableData,
        objectSpanMethod,
        furnaceSectionTableData,
        baseInfoTableData,
        aiModeTableData,
        footTable,
        columnWidth,
        columnHeight,
        graphDataAI,
        graphDataMM,
        graphDataPLC,
        imagePath,
        lowerGraph,
        upperGraph,
        // lowerGraph_P5,
        // upperGraph_P5,
        // lowerGraph_P6,
        // upperGraph_P6,
        graphPropsName,
        temGraphOptions,
        temGraphOption,
        handleOptionChange,
        warningInfo,
        dataTimeX,
        realTempTimeX,
        dataY,
        dataNext,
        // dataY_P5,
        // dataY_P6,
        annealHandleOptionChange,
        annealGraphOptions,
        annealGraphOption,
        annealGraphTitle,
        dewPoint,
        p4Temp,
        p5Temp,
        p6Temp,
        distance,
        // change,
        p4Change,
        p5Change,
        p6Change,
        menuData,
      };
    },
  });
</script>
<style scoped lang="less">
  .top {
    height: 24vh;
    width: 100%;
    display: flex;
    flex-direction: column;

    .top-left {
      width: 30vw;
      height: 24vh;
      display: flex;
      flex-direction: column;

      .svg {
        width: 100%;
        height: 20vh;
        flex-shrink: 0;

        svg {
          width: 100%;
          height: 100%;
        }
      }

      .msg-title {
        top: -4vh;
        left: 39.5vw;
        background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2vh;
        font-weight: bolder;
        width: 10vw;
      }

      .information {
        color: #fff;
        width: 30vw;
        height: 3.5vh;
        top: -1vh;
        left: -1.2vw;
        border: 2px solid #3981d9;
        border-radius: 5px;
        padding: 0 0.2vw;
      }
    }

    .top-middle {
      height: 24vh;
      width: 48vw;
      margin-right: 0.9%;
      margin-left: 1%;

      :deep(.el-table-column) {
        &:nth-child(1) {
          width: 20% !important;
        }
        &:nth-child(n + 2) {
          width: 16% !important;
        }
      }
    }

    .top-right {
      height: 24vh;
      width: 20vw;
      display: flex;
      flex-direction: column;
      margin-right: 0.1%;
    }
  }

  .middle {
    height: 30vh;
    width: 100%;
    margin-top: 1%;

    .middle-left {
      height: 30vh;
      width: 79vw;

      .annealing_graph_1-1 {
        height: 29vh;
        width: 78vw;
      }
    }

    .middle-right {
      width: 20vw;
      height: 30vh;
      margin-left: 0.9%;
      margin-right: 0.1%;
      margin-top: 3.5vh;
    }
  }

  .foot-lineChart {
    height: 22vh;
    width: 100%;
    margin-top: 1%;

    .foot-lineChart-left {
      height: 100%;
      width: 99vw;
      .real-time_tem_graph {
        height: 100%;
        width: 100%;
      }
    }

    .foot-lineChart-right {
      width: 20vw;
      height: 100%;
      margin-left: 0.9%;
      margin-right: 0.1%;
      overflow: auto;
      overflow: hidden;
      :deep(.el-table-column) {
        width: 20% !important;
        &:first-child {
          width: 25% !important;
        }
      }
      :deep(.el-table) {
        // 禁用全局滚动
        // overflow: hidden !important;
        height: 25vh !important;

        // 固定表头
        .el-table__header-wrapper {
          position: sticky;
          top: 0;
          z-index: 2;
          background: #2f59af; // 与header背景色同步
        }

        // 数据滚动容器
        .el-table__body-wrapper {
          overflow-y: auto !important;
          overflow-x: auto !important;
          // max-height: calc(25vh - 38px); // 精确计算数据区高度
          max-height: 15vh;
        }

        // 行高与字体压缩
        .el-table__row {
          height: 26px !important;
          td {
            padding: 1px 4px !important;
            .cell {
              font-size: 10px !important;
              transform: scale(0.85);
              transform-origin: left;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis; // 长文本显示...
            }
          }
        }

        // 滚动条样式 (与主题色匹配)
        .el-table__body-wrapper::-webkit-scrollbar {
          width: 6px;
          background: rgba(47, 89, 175, 0.2); // 半透明背景
        }
        .el-table__body-wrapper::-webkit-scrollbar-thumb {
          background: #2f59af; // 主蓝
          border-radius: 3px;
          &:hover {
            background: #3a6cd6;
          }
        }
      }

      // 列宽分配 (5列布局)
      :deep(.el-table__header) {
        th {
          &:nth-child(1) {
            width: 28%;
          } // 卷号
          &:nth-child(2) {
            width: 18%;
          } // 钢种
          &:nth-child(3) {
            width: 18%;
          } // 宽度
          &:nth-child(4) {
            width: 18%;
          } // 厚度
          &:nth-child(5) {
            width: 18%;
          } // 命中率
        }
      }
    }
  }

  .foot {
    height: 10vh;
    width: 100%;
    margin-top: 1%;
    :deep(.el-table-column) {
      width: 20% !important;
    }
  }

  .home {
    background-size: cover;
    position: relative;
    overflow: hidden;
    height: 100vh;
    display: grid;
    grid-template-rows: 5vh 17vh 35vh 40vh;
    grid-row-gap: 1vh;
    background-size: 100% 100%;
  }

  .realTimeTemp {
    color: white;
    margin-left: 5px;

    .realTimeTemp_row {
      margin-left: 19vh;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
    }
  }

  /* 表格 */
  .coiler_elTableContainer .el-table {
    --el-table-border-color: transparent;
  }

  :deep(.coiler_elTableContainer .el-table tr) {
    background-color: transparent;
  }

  :deep(.coiler_elTableContainer .el-table__row .el-table_1_column_1 .cell .cell_row) {
    background-color: transparent;
  }

  :deep(.coiler_elTableContainer .el-table__row .cell) {
    border-radius: 4px;
    width: 100%;
    padding: 1px 0;
    height: 3vh;
    border: #06279d;
    border-style: solid;
    border-width: 1px;
  }

  :deep(.coiler_elTableContainer .el-table__row .cell_row) {
    background-color: #05c8e6;
    border-radius: 4px;
    width: 95%;
    width: 97%;
    margin: 2px 2px;
    height: 2.3vh;
    font-weight: bolder;
  }

  /**>uncoiler_elTableContainer*/
  .uncoiler_elTableContainer {
    margin-right: 0.5vw;
  }

  .uncoiler_elTableContainer .el-table {
    --el-table-border-color: transparent;
  }

  :deep(.uncoiler_elTableContainer .el-table tr) {
    background-color: transparent;
  }

  :deep(.uncoiler_elTableContainer .el-table__row .el-table_2_column_4 .cell .cell_row) {
    background-color: transparent;
  }

  :deep(.uncoiler_elTableContainer .el-table__row .cell) {
    border-radius: 4px;
    width: 100%;
    padding: 1px 0;
    height: 3vh;
    border: #06279d;
    border-style: solid;
    border-width: 1px;
    font-size: 0.8vw;
  }

  :deep(.uncoiler_elTableContainer .el-table__row .cell_row) {
    background-color: #05c8e6;
    border-radius: 4px;
    width: 95%;
    width: 97%;
    margin: 2px 2px;
    height: 2.3vh;
    font-weight: bolder;
  }

  .common_table .el-table {
    // height: 100%;
    --el-table-row-hover-bg-color: unset;
    flex: 1; /* 填充剩余空间 */
    display: flex;
    flex-direction: column;
  }

  .entrance_material_roll .el-table {
    --el-table-row-hover-bg-color: unset;
  }

  :deep(.el-table) {
    background-color: transparent;
    --el-table-border: none;
    color: white;

    .el-table__row {
      height: auto !important;
      line-height: 1.2;
    }
    .el-table__cell {
      padding: 2px 4px !important; // 横向纵向同时压缩
      .cell {
        height: auto !important;
        line-height: 1.9;
        font-size: 10px !important;
        transform: scale(0.85); // 字体缩放
        transform-origin: left; // 防止内容偏移
        white-space: nowrap; // 禁止换行
        // overflow: hidden;
        text-overflow: ellipsis; // 溢出显示...
      }
    }
    el-table__header-wrapper,
    .el-table__body-wrapper {
      min-width: 100% !important;
      width: auto !important;
    }
  }

  :deep(.el-table__inner-wrapper::before) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
  }

  :deep(.el-table th),
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: transparent;
  }

  :deep(.common_table .el-table__row:nth-child(odd)) {
    background-color: #223671;
  }

  :deep(.containerContent .el-table .el-table__cell) {
    padding: 0.54vh 0;
  }

  :deep(.containerContent .el-table .cell) {
    font-size: 0.8vw;
    padding: 0 0.3vw;
  }

  :deep(.entrance_material_roll .el-table .cell) {
    font-size: 0.6vw;
    padding: 0px;
  }

  /* 深度选择器修改 el-select 内部元素的样式 */
  :deep(.real-time_tem_select .el-select__wrapper) {
    // background-color: rgba(41, 121, 255, 0.2) !important;
    background-color: transparent !important;
    border: 1px solid #42b4ff !important;
    // border: 1px solid #fff !important;
    box-shadow: 0 0 8px rgba(41, 121, 255, 0.5) !important;
    // height: 22px !important;
    // width: 110px;
  }

  :deep(.real-time_tem_select .el-input__inner) {
    // height: 20px !important;
    // line-height: 20px !important;
    // font-size: 11px !important;
    color: #fff !important;
    // padding: 0 10px;
  }

  :deep(.real-time_tem_select .el-select__placeholder) {
    // font-size: 11px !important;
    // color: #a0a3a8;
    color: #fff;
  }

  :deep(.base-info .el-table) {
    --el-table-border: none;
    .el-table__cell {
      .cell {
        height: 3.5vh !important;
        text-align: center;
        font-size: 0.7vw !important;
      }
    }
  }

  // :deep(.top-middle .el-table) {
  //   --el-table-border: none;
  //   .el-table__cell {
  //     .cell {
  //       height: 3.5vh !important;
  //       text-align: center;
  //       font-size: 0.7vw !important;
  //     }
  //   }
  // }

  .scroll-text {
    display: inline-block;
    max-width: 280px;
    animation: marquee 15s linear infinite;
    white-space: nowrap;
    overflow: hidden;
  }

  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>
